<template>
  <div class="parogress" ref="progress_bar">
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    name:'ProgressBar',
    mounted() {
        let myChart = echarts.init(this.$refs.progress_bar);
         myChart.setOption({
            xAxis: {
                show:false,
                // type:'category'
                 max:100,
                 min:0,
                width:30,
                
            },
             yAxis: {
                 show:false,
                type: 'category',
            },
              grid:{
                bottom:0,
                top:0,
                left:0,
                right:0
            },
            series: [{
                type: 'bar',
                color:"yellowgreen",
                data: [70],
                // 柱状图的宽度
               barWidth: 17,
                // 是否显示背景颜色
               showBackground:true,
                // 背景颜色配置
               backgroundStyle:{
                   color:'rgba(180, 180, 180, 0.2)'
               },
                // 图形上的文本标签
               label:{
                   show:true,
                //    设置图形标签字为 什么
                   formatter:"|",
                //    标签的位置
                   position:"right"
               }
               
            }]
         })
    },
}
</script>

<style>
.parogress{
    width: 100%;
    height: 100%;
}
</style>